<template>
  <div id="qmap">
    <div id="amap-wrapper">
      <el-amap
        vid="amapDemo"
        :center="center"
        :zoom="zoom"
        class="amap-demo"
        :events="events"
        pitch-enable="false"
      >
        <el-amap-marker v-for="(marker,index) in markers" :key="index" :events="marker.events" :position="marker.position"/>
        <el-amap-info-window
          v-if="window"
          :position="window.position"
          :visible="window.visible"
          :content="window.content"
          :offset="window.offset"
          :close-when-click-map="true"
          :is-custom="true"
        >
          <div id="info-window">
            <p>{{ window.address }}</p>
          </div>
        </el-amap-info-window>
      </el-amap>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    getDatas: Function,
    mapCenter: Array
  },
  data () {
    const self = this
    return {
      data: [{
        position: '119.526688, 39.836216',
        address: '鸽子窝公园'
      },
      {
        position: '119.535365, 39.82047',
        address: '碧螺塔酒吧公园'
      },
      {
        position: '119.458809, 39.824137',
        address: '联峰山公园'
      },
      {
        position: '119.488542, 39.813902',
        address: '老虎石海上公园'
      },
      {
        position: '119.498327, 39.826546',
        address: '怪楼奇园景区'
      },
      {
        position: '119.498327,39.826546',
        address: '秦皇岛野生动物园'
      },
      {
        position: '119.564164, 39.906766',
        address: '新澳海底世界'
      },
      {
        position: '119.429066,39.790493',
        address: '南戴河旅游度假区'
      },
      {
        position: '119.399884, 39.772288',
        address: '远洋蔚蓝海岸'
      },
      {
        position: '119.6227, 39.913317',
        address: '秦皇求仙入海处'
      },
      {
        position: '119.757607, 39.955585',
        address: '乐岛海洋王国'
      },
      {
        position: '119.760042,40.01084',
        address: '天下第一关'
      },
      {
        position: '119.797691,39.968517',
        address: '老龙头景区'
      },
      {
        position: '119.45783,40.142826',
        address: '祖山风景区'
      },
      {
        position: '119.704406,40.043875',
        address: '堰塞湖景区'
      },
      {
        position: '119.741669,40.037204',
        address: '角山长城'
      }],
      zoom: 13,
      center: this.mapCenter,
      expandZoomRange: true,
      markers: [],
      window: '',
      events: {
        click (e) {
          const { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
        }
      },
      lng: 0,
      lat: 0,
      timer: ''
    }
  },
  mounted () {
    this.timer = setTimeout(this.putData, 30)
    this.point()
  },
  methods: {
    putData () {
      this.getDatas(this.data)
    },
    point () {
      const markers = []
      const windows = []
      const that = this
      this.data.forEach((item, index) => {
        markers.push({
          position: item.position.split(','),
          icon: `https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-${index + 1}.png`, // 不设置默认蓝色水滴
          events: {
            mouseover () {
              // 方法：鼠标移动到点标记上，显示相应窗体
              that.windows.forEach(window => {
                window.visible = false // 关闭窗体
              })
              that.window = that.windows[index]
              that.$nextTick(() => {
                that.window.visible = true
              })
            }
          }
        })
        windows.push({
          position: item.position.split(','),
          isCustom: true,
          offset: [115, 55], // 窗体偏移
          showShadow: false,
          visible: false, // 初始是否显示
          address: item.address
        })
      })
      //  加点
      this.markers = markers
      // 加弹窗
      this.windows = windows
    }
  },
  watch: {
    mapCenter: function () {
      this.center = this.mapCenter
    }
  }
}
</script>

<style scoped>
  #qmap{
    width: 50%;
    height: 30rem;
    margin-left: 50%;
  }
  #amap-wrapper{
    width: 100%;
    height: 100%;
  }
</style>
